<template>
	<view>
				<view class='target-wrap uni-flex'>
				<block v-for='(item,index) in targetList1' :key="index">
				<view class="target-list  uni-flex zcAlignI_center"> 
					<view class='zcAlignI_center uni-flex zcJustifyC_center '><view :class="['iconfont', 'icon-'+item.icon]"></view></view>
					<view class='target-list-text'> 
						<view>{{item.numb}}</view>
						<view>{{item.name}}</view>
					</view>
				</view>
			</block>
		</view>
			<view class="title">当月：</view>
				<view class='target-wrap uni-flex'>
				<block v-for='(item,index) in targetList2' :key="index">
					<view class="target-list  uni-flex zcAlignI_center"> 
						<view class='zcAlignI_center uni-flex zcJustifyC_center '><view :class="['iconfont', 'icon-'+item.icon]"></view></view>
						<view class='target-list-text'> 
							<view>{{item.numb}}</view>
							<view>{{item.name}}</view>
						</view>
					</view>
				</block>
			</view>
	</view>
</template>

<script>
	
		export default{
			props:{
				targetList1:Array,
				targetList2:Array
			},
			data(){
				return{
					
				}
			},
			created() {
				console.log('targetList1 = ',this.targetList1);
			}
		}
</script>

<style>
	.target-wrap{
			width: 100%;
			flex-wrap: wrap
		}
		.target-list{
			margin-top: 4%;
			margin-left: 4%;
			background-color: #fff;
			padding:15upx 8upx;
			box-shadow: 1upx 1upx 5upx 2upx #DAECFB;
			width: 44% !important;
			box-sizing: border-box;
		}
			.target-list>view:first-child{
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				background-color:#E2F3E1;
				margin: 0 22upx 0 10upx;
			}
			.target-list>view:first-child>image{
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
			}
			.target-list-text>view:nth-of-type(2){
				color:#6C6C6C;
				font-size: 24upx !important;
			}
			.target-list-text>view{
				height: 35upx;
				line-height: 35upx;
			}
			.iconfont{
				font-size: 32upx;
			}
				.target-list:nth-of-type(2)>view:first-child{
				background-color: #D9F7F9;
			}
				.target-list:nth-of-type(3)>view:first-child{
				background-color: #FEF6E1;
			}
				.target-list:nth-of-type(4)>view:first-child{
				background-color:#EEE6FE;
			}
			.icon-icons-:before {//线索
				color:#01C0D4;
				font-size: 28upx;
			}
			.icon-shibai1:before { //失败
				color:#EDB935
			}
			.icon-zhengque:before { //正确
				color:#4DCA4E
			}
			.icon-shijian:before { //进度
				color:#8350E1
			}
	.title{
			height:60upx;
			line-height: 90upx;
			padding-left: 30upx;
			width: 100%;	
			color:#6C6C6C
		}
		
</style>
